<template>
  <el-button type="primary" @click="handleButton">防抖</el-button>
</template>

<script setup>
//防抖， 指定时间段后执行一次函数，如果在指定时间段内重复触发，则重新计时。
// 延迟执行，在指定时间内不再触发事件才会执行。
const debounce = (fn, delay) => {
  let timeout = null
  return () => {
    if (timeout) clearTimeout(timeout)
    timeout = setTimeout(() => {
      fn()
    }, delay)
  }
}
const handleButton = debounce(() => {
  console.log('防抖点击handleButton')
}, 1000)
</script>

<style lang="scss" scoped></style>